<template>
    <div class="app-container">
        <el-form :inline="true"  label-width="5rem" :model="searchFrom" class="demo-form-inline">
            <#list Fields as field>
                <#if field.simpleQuery == true>
                    <#if field.selectUrl??>
                        <el-form-item :label="$t('${moduleName}.${objectName}.${field.javaField!''}')">
                            <el-select v-model="searchFrom.${field.javaField!''}" multiple :placeholder="$t('common.selectTips')">
                                <el-option
                                        v-for="item in options.${field.javaField!''}"
                                        :key="item.${field.selectKey!''}"
                                        :label="item.${field.selectValue!''}"
                                        :value="item.${field.selectKey!''}">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <#else>
                        <el-form-item :label="$t('${moduleName}.${objectName}.${field.javaField!''}')">
                            <el-input v-model="searchFrom.${field.javaField!''}" :placeholder="$t('common.selectTips')"></el-input>
                        </el-form-item>
                    </#if>
                </#if>
                <#if field.query == true && field.simpleQuery == false>
                    <#if field.selectUrl??>
                        <el-form-item v-if="moreSearch" :label="$t('${moduleName}.${objectName}.${field.javaField!''}')">
                            <el-select v-model="searchFrom.${field.javaField!''}" multiple :placeholder="$t('common.selectTips')">
                                <el-option
                                        v-for="item in options.${field.javaField!''}"
                                        :key="item.${field.selectKey!''}"
                                        :label="item.${field.selectValue!''}"
                                        :value="item.${field.selectKey!''}">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    <#else>
                        <el-form-item v-if="moreSearch" :label="$t('${moduleName}.${objectName}.${field.javaField!''}')">
                            <el-input v-model="searchFrom.${field.javaField!''}" placeholder="${field.comment!'未定义'}"></el-input>
                        </el-form-item>
                    </#if>
                </#if>
            </#list>
            <el-form-item :label="$t('common.more')">
                <el-switch v-model="moreSearch" @change="moreChange">
                </el-switch>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button type="primary" icon="el-icon-search" @click="getList">{{$t('common.queryBtn')}}</el-button>
                <el-button type="primary" v-permission="'${moduleName}:${objectName}:insert'" @click="add${beanName}"><i class="el-icon-plus" />{{$t('common.addBtn')}}</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
            <el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
                <template slot-scope="{row}">
                    <template v-if="item.type == 'select'">
                        <span>{{ translation[item.field][row[item.field]] }}</span>
                    </template>
                    <template>
                        <span>{{ row[item.field] }}</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column :label="$t('common.operation')">
                <template slot-scope="scope">
                    <el-button v-permission="'${moduleName}:${objectName}:update'" icon="el-icon-edit" type="primary" size="mini" @click="edit${beanName}(scope.$index, scope.row)">{{$t('common.editBtn')}}</el-button>
                    <el-button v-permission="'${moduleName}:${objectName}:delete'" icon="el-icon-delete" size="mini" type="danger" @click="delete${beanName}(scope.$index, scope.row)">{{$t('common.delBtn')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
                       :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                       background>
        </el-pagination>
        <el-dialog width="40%"  :visible.sync="${objectName}AddFormVisible" center>
            <div  slot="title" class="dialog-title">
                <div class="dialog-header">
                    {{$t('${moduleName}.${objectName}')}}
                </div>
            </div>
            <${objectName}Edit :${objectName}Info="${objectName}Info" />
            <div slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
                <div class="dialog-btn-top">
                    <el-button type="danger" icon="el-icon-close" @click="${objectName}AddFormVisible = false">{{$t('common.cancelBtn')}}</el-button>
                    <el-button icon="el-icon-check" type="primary" @click="save">{{$t('common.saveBtn')}}</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import request from '@/utils/request'
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import ${objectName}Edit from '@/views/${moduleName}/${vuePath}/${vuePath}-edit.vue'
    export default {
        name: '${objectName}List',
        components: {
            ${objectName}Edit
        },
        directives: {
            permission
        },
        data() {
            return {
                //更多检索条件
                moreSearch: true,
                //弹窗是否可见
                ${objectName}AddFormVisible: false,
                //搜索表单
                searchFrom: {
                    <#list Fields as field>
                        <#if field.simpleQuery == true>
                        ${field.javaField!''}: "",
                        </#if>
                    </#list>
                    pageNo: 1,
                    pageSize: 10
                },
                //表的下拉数据
                tableList: [],
                //正在编辑的用户信息
                ${objectName}Info: {
                <#list Fields as field>
                <#if field.editShow == true>
                ${field.javaField!''}: ""<#if field_has_next>,</#if>
                </#if>
                </#list>
                },
                //表头
                tableColumn: [
                <#list Fields as field>
                    <#if field.listShow == true>
                {
                    field: '${field.javaField!''}',
                    title: this.$t("${moduleName}.${objectName}.${field.javaField!''}"),
                    <#if field.selectUrl??>
                    type: 'select'
                    </#if>
                }<#if field_has_next>,</#if>
                    </#if>
                </#list>
                ],
                //数据转译
                translation: {
                <#list Fields as field>
                    <#if field.selectUrl??>
                    ${field.javaField!''}: {}<#if field_has_next>,</#if>
                    </#if>
                </#list>
                },
                //所有的下拉选项
                options:{
                    <#list Fields as field>
                    <#if field.selectUrl??  && field.editShow == true>
                    ${field.javaField!''}: []<#if field_has_next>,</#if>
                    </#if>
                    </#list>
                },
                //查询方式列表
                listLoading: false,
                //数据列表
                list: null,
                //分页相关参数
                page: {
                pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0,
                    currentPage: 1
                }
            }
        },
        //页面初始化加载
        created() {
            this.getList();
            <#list Fields as field>
            <#if field.selectUrl??>
            this.get${field.javaField?cap_first}();
            </#if>
            </#list>
        },
        methods: {
            //查询列表
            getList() {
                this.searchFrom['pageNo'] = this.page.currentPage
                this.searchFrom['pageSize'] = this.page.pageSize
                request({
                    url: '/${moduleName}/${objectName}/queryByPage',
                    method: 'post',
                    data: this.searchFrom
                }).then(response => {
                    this.list = response.data.list
                    this.page.total = response.data.total
                    this.page.currentPage = response.data.pageNum
                })
            },
            //保存用户信息
            save() {
                var url = '/${moduleName}/${objectName}/insert';
                if (this.${objectName}Info.${tableConfiguration.keyProperty}) {
                    url = '/${moduleName}/${objectName}/update';
                }
                request({
                    url: url,
                    method: 'post',
                    data: this.${objectName}Info
                }).then(response => {
                    const h = this.$createElement;
                    this.$notify({
                        title: '提示信息',
                        message: h('i', {
                            style: 'color: teal'
                        }, response.message)
                    });
                    this.getList();
                    this.${objectName}AddFormVisible = false;
                })
            },
            //添加
            add${beanName}() {
                this.${objectName}Info =  {
                    <#list Fields as field>
                    <#if field.editShow == true>
                    ${field.javaField!''}: "",
                    </#if>
                    </#list>
                }
                this.${objectName}AddFormVisible = true;
            },
            //编辑
            edit${beanName}(index, row) {
                this.${objectName}Info =  {
                <#list Fields as field>
                <#if field.editShow == true>
                ${field.javaField!''}: "",
                </#if>
                </#list>
                }
                this.${objectName}Info = row;
                this.${objectName}AddFormVisible = true;
            },
            //删除用户
            delete${beanName}(index, row) {
                this.$confirm('是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmDelete(row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //确认删除操作
            confirmDelete(row) {
                var url = '/${moduleName}/${objectName}/delete';
                request({
                    url: url,
                    method: 'post',
                    data: row
                }).then(response => {
                    const h = this.$createElement;
                    this.$notify({
                        title: '提示信息',
                        message: h('i', {
                            style: 'color: teal'
                        }, response.message)
                    });
                    this.getList();
                    this.${objectName}AddFormVisible = false;
                })
            },
            //分页数量修改
            pageSizeChange(pageSize) {
                this.page.pageSize = pageSize;
                this.getList();
            },
            //页码修改
            currentPageChange(page) {
                this.page.currentPage = page;
                this.getList();
            },
            //更多查询条件
            moreChange() {
                <#list Fields as field>
                <#if field.query == true && field.simpleQuery == false>
                this.searchFrom["${field.javaField!''}"] = null;
                </#if>
                </#list>
            },
            <#list Fields as field>
            <#if field.selectUrl??>
            get${field.javaField?cap_first}() {
                request({
                    url: '${field.selectUrl}',
                    method: 'post'
                }).then(response => {
                    this.options["${field.javaField!''}"] = response.data;
                    for(var i = 0 ;  i <  this.options["${field.javaField!''}"].length ; i++){
                        this.translation["${field.javaField!''}"][this.options["${field.javaField!''}"][i].${field.selectKey}] = this.options["${field.javaField!''}"][i].${field.selectValue}
                    }
                })
            },
            </#if>
            </#list>
        }
    }
</script>